<template>
  <div class="all">

    <div>
      <el-input placeholder="请输入关键词" v-model="input" class="searchClass">
        <div slot="prepend">
          <div class="centerClass">
            <el-select v-model="select" placeholder="全部" style="width: 120px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="专题文章" value="1"></el-option>
              <el-option label="开发者手册" value="2"></el-option>
              <el-option label="用户手册" value="3"></el-option>
              <el-option label="常见问题" value="4"></el-option>
              <el-option label="更新公告" value="5"></el-option>
            </el-select>
          </div>
        </div>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <div >
      <div v-if="true" class="hot">
        <div>  
          <div>
            <span>热门搜索: </span>
            <el-tag style="margin: 10px; width: 100px;" v-for="tag in hotList" :key="tag" :type="tag"> {{tag.length>6 ? tag.substring(0,5) +  '...': tag}} </el-tag>
          </div>
        </div>
        <div style="margin-top: 20px;">
          <div> <span>文档导航: </span> </div>
          <div>
            <el-row :gutter="16" style="margin-top:10px;">
                <el-col :span="8">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix" > <span  icon="el-icon-search"></span> <h3 >专题文章</h3> </div>
                    <div slot="header" v-for="o in 4" :key="o" class="text item" style="margin-bottom: 10px;"> {{'▪ 列表内容 ' + o }} </div>
                    <div> <li style="list-style-type: none;"> 查看更多 <i class="el-icon-arrow-right" ></i> </li> </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix" > <span  icon="el-icon-search"></span> <h3 >开发者手册</h3> </div>
                    <div slot="header" v-for="o in 4" :key="o" class="text item" style="margin-bottom: 10px;"> {{'▪ 列表内容 ' + o }} </div>
                    <div> <li style="list-style-type: none;"> 查看更多 <i class="el-icon-arrow-right" ></i> </li> </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix" > <span  icon="el-icon-search"></span> <h3 >用户手册</h3> </div>
                    <div slot="header" v-for="o in 4" :key="o" class="text item" style="margin-bottom: 10px;"> {{'▪ 列表内容 ' + o }} </div>
                    <div> <li style="list-style-type: none;"> 查看更多 <i class="el-icon-arrow-right" ></i> </li> </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix" > <span  icon="el-icon-search"></span> <h3 >常见问题</h3> </div>
                    <div slot="header" v-for="o in 4" :key="o" class="text item" style="margin-bottom: 10px;"> {{'▪ 列表内容 ' + o }} </div>
                    <div> <li style="list-style-type: none;"> 查看更多 <i class="el-icon-arrow-right" ></i> </li> </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix" > <span  icon="el-icon-search"></span> <h3 >更新公告</h3> </div>
                    <div slot="header" v-for="o in 4" :key="o" class="text item" style="margin-bottom: 10px;"> {{'▪ 列表内容 ' + o }} </div>
                    <div> <li style="list-style-type: none;"> 查看更多 <i class="el-icon-arrow-right" ></i> </li> </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix" > <span  icon="el-icon-search"></span> <h3 >其他内容</h3> </div>
                    <div slot="header" v-for="o in 4" :key="o" class="text item" style="margin-bottom: 10px;"> {{'▪ 列表内容 ' + o }} </div>
                    <div> <li style="list-style-type: none;"> 查看更多 <i class="el-icon-arrow-right" ></i> </li> </div>
                  </el-card>
                </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div v-if="false" class="result">
        <div>
          <div style="position:relative;">
            <ul style="width: 200px; float: left;">
              <li style="list-style-type: none;" class="li liselect" > 全部 </li>
              <li style="list-style-type: none;" class="li"> 专题文章 </li>
              <li style="list-style-type: none;" class="li"> 开发者手册 </li>
              <li style="list-style-type: none;" class="li"> 用户手册 </li>
              <li style="list-style-type: none;" class="li"> 常见问题 </li>
              <li style="list-style-type: none;" class="li"> 更新公告 </li>
            </ul>
            <div style="width: 1000px;float: right;margin-top: 5px; padding-left: 10px;">
              <div v-for="i in 10">
                <ul>
                  <li style="list-style-type: none;" > 
                      <p class="liresult">
                        <a target="_blank" href="http://www.baidu.com">Title A</a>
                      </p>
                      <div style="height: auto;font-size: 15px;color: #778299;">
                        <a target="_blank" href="http://www.baidu.com">
                          <p>文章内容hgkjhjhkkjhlkjlkj看了交流交流jj花开花落看见了据了解据了解颗粒剂尽量快尽量快进来据了解解决了交流文章内容hgk文章内容hgkjhjhkkjhlkjlkj看了交流交流jj花开花落看见了据了解据了解颗粒剂尽量快尽量快进来据了解解决了交流交流奖励基金；文章内容hgkjhjhkkjhlkjlkj看了交流交流jj花开花落看见了据了解据了解颗粒剂尽量快尽量快进来据了解解决了交流交流奖励基金；jhjhkkjhlkjlkj看了交流交流jj花开花落看见了据了解据了解颗粒剂尽量快尽量快进来据了解解决了交流交流奖励基金；交流奖励基金； 进来dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjlkjlk极乐空间</p>
                        </a>
                      </div>
                      <div style="position: relative;height: 20px;">
                        <p style="height: 5px;font-size: 12px;color: #778299; float: left;margin-top: 0px;">  
                          <a target="_blank" href="http://www.baidu.com" style="margin: 0px 0px;">
                          <p style="margin: 0px 0px;">菜单A > 菜单B > 菜单C </p>
                        </a> 
                        </p>
                        <p style="height: 5px;font-size: 12px;color: #778299; float: right;margin-top: 0px;">
                          <span> 浏览次数：46 </span>
                          <span> 更新时间：2023-01-01 </span>
                        </p>
                      </div>
                  </li>
                </ul>
              </div>
              
              <el-pagination style="margin: 40px 35px;" :total="100"  :current-page="1" :page-size="10" @current-change="" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
            </div>
          </div>

        </div>
      </div>

    </div>
    
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      input: '',
      select: '',
      hotList:['sasa',
      'kkk k ',
      '据了哈哈哈多少度解了解的点点滴滴多多多多多多了解了',
      '品牌那你',
      'pool',
      '颠三倒四',
      '大大大',
      '等等']
    };
  }
};
</script>

<style>
.result{
  border: 0px solid #ffffff;
  background: #ffffff;
  margin: 30px auto;
  margin-left: 80px; 
  margin-right: 200px; 
  vertical-align: middle;
  height: 50px;
  padding: 5px;
}
.liresult{
  height: 20px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #304265;
    line-height: 26px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
}
.liselect{
  background-color: #F4F8FC;
    color: #107FFF;
}
.li{
  width: 180px;
    padding: 20px 16px;
    height: 35px;
    font-size: 16px;
    /* color: #304265; */
    /* line-height: 24px; */
    cursor: pointer;
}
.all{
  width: 1600px;
  height: 50px;
  padding: 50px;
}
.hot{
  border: 0px solid #ffffff;
  background: #ffffff;
  margin: 30px auto;
  margin-left: 200px; 
  margin-right: 200px; 
  vertical-align: middle;
  height: 50px;
  padding: 5px;
}
.hotItem{
  margin-right: 200px; 
}
.nav{
  border: 0px solid #ffffff;
  background: #ffffff;
  margin: 30px auto;
  margin-left: 200px; 
  margin-right: 200px; 
  vertical-align: middle;
  height: 50px;
  padding: 5px;
}
.cards{
  margin-top: 20px; 
}
.box-card{
    width: 320px;
    margin-top: 20px; 
}
.searchClass{
  border: 1px solid #c5c5c5;
  border-radius: 20px;
  background: #f4f4f4;
  margin: 30px auto;
  margin-left: 380px; 
  vertical-align: middle;
  width: 700px;
  height: 50px;
  padding: 5px;
}
.searchClass .el-input-group__prepend {
  border: none;
  background-color: transparent;
  padding: 0 10px 0 30px;
}
.searchClass .el-input-group__append {
  border: none;
  background-color: transparent;
}
.searchClass .el-input__inner {
  height: 36px;
  line-height: 36px;
  border: none;
  background-color: transparent;
}
.searchClass .el-icon-search{
  font-size: 16px;
}
.searchClass .centerClass {
  height: 100%;
  line-height: 100%;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}
.searchClass .line {
  width: 1px;
  height: 26px;
  background-color: #c5c5c5;
  margin-left: 14px;
}
.searchClass:hover{
  border: 1px solid #D5E3E8;
  background: #fff;
}
.searchClass:hover .line {
  background-color: #D5E3E8;
}
.searchClass:hover .el-icon-search{
  color: #409eff;
  font-size: 16px;
}
</style>